<!--  -->
<template>
  <a-modal
    :bodyStyle="{ padding: '0', 'max-height': '80vh', 'overflow-y': 'auto' }"
    :title="title"
    :width="1000"
    :maskClosable="false"
    :visible="visible"
    @cancel="visible = false"
    :button_loading="button_loading"
  >
    <a slot="footer">
      <a-button @click="visible = false">{{ cancelText }}</a-button>
      <a-button
        v-if="okText == '保存' && actionType != 'view'"
        type="primary"
        @click="handleSubmit"
        >{{ okText }}</a-button
      >
    </a>
    <a-spin :indicator="indicator" :spinning="spinning" :tip="tip">
      <div class="spin-content">
        <a-form
          :form="form"
          :class="{ disable: actionType == 'view' ? true : false }"
        >
          <a-row :gutter="16">
            <a-col class="gutter-row" :span="12">
              <a-form-item v-bind="formItemLayout" label="监管对象">
                <span class="tabs_span" v-if="userSelect.name"
                  >{{ userSelect.name }}
                  <a-icon
                    type="close"
                    style="margin-left: 10px"
                    @click="handleDelUser()"
                /></span>

                <a-button type="link" @click="handleSelectUser">
                  选择人员
                </a-button>
                <!-- <a-select showSearch v-decorator="[
                        'supervisionObjectID',
                        {
                          rules: [
                            { required: true, message: '请选择!' },
                          ],
                        },
                      ]">
                  <a-select-option v-for="(item, index) in supervisionList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
                </a-select> -->
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-form-item v-bind="formItemLayout" label="走访工作人员">
                <a-input
                  placeholder="输入走访工作人员"
                  v-decorator="[
                    'workingPersonnel',
                    {
                      rules: [
                        { required: true, message: '请输入走访工作人员!' },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-form-item v-bind="formItemLayout" label="走访方式">
                <a-select
                  showSearch
                  v-decorator="[
                    'visitType',
                    {
                      rules: [{ required: true, message: '请选择走访方式!' }],
                    },
                  ]"
                >
                  <a-select-option
                    v-for="(item, index) in visitType"
                    :key="item.value"
                    :value="item.value"
                    >{{ item.label }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-form-item v-bind="formItemLayout" label="被走访人">
                <!-- zfrList -->
                <a-select
                  allowClear
                  optionFilterProp="children"
                  :filterOption="filterOption"
                  v-decorator="[
                    'visitPersonRelationship',
                    {
                      rules: [{ required: true, message: '请选择被走访人!' }],
                    },
                  ]"
                >
                  <a-select-option
                    v-for="(item, index) in zfrList"
                    :key="item.value"
                    :value="item.value"
                    >{{ item.label }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>

            <a-col class="gutter-row" :span="12">
              <a-form-item v-bind="formItemLayout" label="走访时间">
                <a-date-picker
                  format="YYYY-MM-DD HH:mm:ss"
                  v-decorator="[
                    'visitDate',
                    {
                      rules: [{ required: true, message: '请选择走访时间!' }],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>

            <a-col class="gutter-row" :span="12">
              <a-form-item v-bind="formItemLayout" label="走访地点">
                <a-input
                  v-decorator="[
                    'visitAddress',
                    {
                      rules: [{ required: true, message: '请填写走访地点!' }],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-form-item v-bind="formItemLayout" label="是否配合走访帮教">
                <a-select
                  allowClear
                  v-decorator="[
                    'isCooperate',
                    {
                      rules: [
                        { required: true, message: '请选择是否配合走访帮教!' },
                      ],
                    },
                  ]"
                  @change="handleCooperate"
                >
                  <a-select-option
                    v-for="(item, index) in zfbjList"
                    :key="item.value"
                    :value="item.value"
                    >{{ item.label }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>

            <template v-if="!(userSelect.personType == 2 && Cooperate == 3639)">
              <!-- <template> -->
              <a-col class="gutter-row" :span="12">
                <a-form-item
                  v-bind="formItemLayout"
                  label="户籍地实际居住地一致"
                >
                  <a-select
                    allowClear
                    v-decorator="[
                      'isLiveConsistent',
                      {
                        rules: [
                          {
                            required: true,
                            message: '请选择户籍地实际居住地一致!',
                          },
                        ],
                      },
                    ]"
                    @change="handleIsLive"
                  >
                    <a-select-option :value="1"> 是 </a-select-option>
                    <a-select-option :value="0"> 否 </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="现居住地">
                  <a-input
                    placeholder="填写现居住地"
                    v-decorator="[
                      'currentResidence',
                      {
                        rules: [{ required: true, message: '请填写不良嗜好!' }],
                      },
                    ]"
                  />
                </a-form-item>
              </a-col>

              <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="新实际居住地">
                  <a-input
                    placeholder="有新实际居住地时填写"
                    v-decorator="[
                      'habitation',
                      {
                        rules: [{ required: true, message: '请填写不良嗜好!' }],
                      },
                    ]"
                  />
                </a-form-item>
              </a-col>

              <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="家庭、邻里关系">
                  <a-select
                    allowClear
                    optionFilterProp="children"
                    :filterOption="filterOption"
                    v-decorator="[
                      'neighborhoodRelationships',
                      {
                        rules: [
                          { required: true, message: '请选择家庭、邻里关系!' },
                        ],
                      },
                    ]"
                  >
                    <a-select-option
                      v-for="(item, index) in llgxList"
                      :key="item.value"
                      :value="item.value"
                      >{{ item.label }}</a-select-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="工作、学习情况">
                  <a-select
                    allowClear
                    v-decorator="[
                      'workSituation',
                      {
                        rules: [
                          { required: true, message: '请选择工作、学习情况!' },
                        ],
                      },
                    ]"
                  >
                    <a-select-option
                      v-for="(item, index) in gzxxList"
                      :key="item.value"
                      :value="item.value"
                      >{{ item.label }}</a-select-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item
                  v-bind="formItemLayout"
                  label="是否无业且不愿参加任何职业技能培训"
                >
                  <a-select
                    allowClear
                    v-decorator="[
                      'isUnemployed',
                      {
                        rules: [
                          {
                            required: true,
                            message:
                              '请选择是否无业且不愿参加任何职业技能培训!',
                          },
                        ],
                      },
                    ]"
                  >
                    <a-select-option :value="1"> 是 </a-select-option>
                    <a-select-option :value="0"> 否 </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="是否有不良嗜好">
                  <a-select
                    allowClear
                    v-decorator="[
                      'isBadHabit',
                      {
                        rules: [{ required: true, message: '请选择不良嗜好!' }],
                      },
                    ]"
                    @change="handleBad"
                  >
                    <a-select-option :value="1"> 是 </a-select-option>
                    <a-select-option :value="0"> 否 </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12" v-if="isBad == 1">
                <a-form-item v-bind="formItemLayout" label="不良嗜好">
                  <a-input
                    v-decorator="[
                      'badHabit',
                      {
                        rules: [{ required: true, message: '请填写不良嗜好!' }],
                      },
                    ]"
                  />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="社会交往">
                  <a-select
                    allowClear
                    v-decorator="[
                      'socialInteraction',
                      {
                        rules: [{ required: true, message: '请选择社会交往!' }],
                      },
                    ]"
                  >
                    <a-select-option
                      v-for="(item, index) in shjwList"
                      :key="item.value"
                      :value="item.value"
                      >{{ item.label }}</a-select-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="思想动态">
                  <a-select
                    allowClear
                    v-decorator="[
                      'ideologicalTrends',
                      {
                        rules: [{ required: true, message: '请选择思想动态!' }],
                      },
                    ]"
                  >
                    <a-select-option
                      v-for="(item, index) in sxdtList"
                      :key="item.value"
                      :value="item.value"
                      >{{ item.label }}</a-select-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="身体健康状况">
                  <a-select
                    allowClear
                    v-decorator="[
                      'health',
                      {
                        rules: [
                          { required: true, message: '请选择身体健康状况!' },
                        ],
                      },
                    ]"
                  >
                    <a-select-option
                      v-for="(item, index) in stjkList"
                      :key="item.value"
                      :value="item.value"
                      >{{ item.label }}</a-select-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="是否特困家庭">
                  <a-select
                    allowClear
                    v-decorator="[
                      'isDestitute',
                      {
                        rules: [
                          { required: true, message: '请选择是否特困家庭!' },
                        ],
                      },
                    ]"
                  >
                    <a-select-option :value="1"> 有 </a-select-option>
                    <a-select-option :value="0"> 无 </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="现实表现情况">
                  <a-select
                    allowClear
                    v-decorator="[
                      'performance',
                      {
                        rules: [
                          { required: true, message: '请选择现实表现情况!' },
                        ],
                      },
                    ]"
                  >
                    <a-select-option
                      v-for="(item, index) in bxqkList"
                      :key="item.value"
                      :value="item.value"
                      >{{ item.label }}</a-select-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="是否存在债务纠纷">
                  <a-select
                    allowClear
                    v-decorator="[
                      'isDispute',
                      {
                        rules: [
                          {
                            required: true,
                            message: '请选择是否存在债务纠纷!',
                          },
                        ],
                      },
                    ]"
                  >
                    <a-select-option :value="1"> 是 </a-select-option>
                    <a-select-option :value="0"> 否 </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="是否存在涉访涉诉">
                  <a-select
                    allowClear
                    v-decorator="[
                      'isPetition',
                      {
                        rules: [
                          {
                            required: true,
                            message: '请选择是否存在涉访涉诉!',
                          },
                        ],
                      },
                    ]"
                  >
                    <a-select-option :value="1"> 是 </a-select-option>
                    <a-select-option :value="0"> 否 </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="是否存在安全风险">
                  <a-select
                    allowClear
                    v-decorator="[
                      'isDanger',
                      {
                        rules: [
                          {
                            required: true,
                            message: '请选择是否存在安全风险!',
                          },
                        ],
                      },
                    ]"
                  >
                    <a-select-option
                      v-for="(item, index) in aqfxList"
                      :key="item.value"
                      :value="item.value"
                      >{{ item.label }}</a-select-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
            </template>

            <a-col class="gutter-row" :span="12">
              <a-form-item v-bind="formItemLayout" label="照片拍摄情况">
                <a-textarea
                  placeholder="照片拍摄情况"
                  :rows="4"
                  v-decorator="['photographSituation']"
                />
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-form-item v-bind="formItemLayout" label="走访照片">
                <a-upload
                  :action="a"
                  list-type="picture-card"
                  :headers="headers"
                  :file-list="fileList"
                  @preview="handlePreview"
                  @change="handleChange"
                  :beforeUpload="beforePhotoUpload"
                >
                  <div v-if="fileList.length < 8">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">上传</div>
                  </div>
                </a-upload>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-spin>
    <photo-modal ref="photomodal"></photo-modal>
    <user-modal
      ref="userModal"
      @getList="handelGetUser"
      :selectKeyObj="userSelect"
    ></user-modal>
  </a-modal>
</template>

<script>
import { visitType } from "@/utils/device";
import PhotoModal from "@/views/photoModal";
import userModal from "./userRadio";

import { getDictById, getDicDropList } from "@/api/dict";
import { getSupervisionObjectList } from "@/api/allApi";
import Vue from "vue";
import { ACCESS_TOKEN } from "@/store/mutation-types";
import { getImg } from "@/api/students";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { PhotoModal, userModal },
  props: {
    actionType: {
      type: String,
      required: false,
      default: "add",
    },
  },
  data() {
    //这里存放数据
    return {
      a: null,
      headers: {
        authorization: "authorization-text",
      },
      fileList: [],
      supervisionList: [],
      PhotoUrlDb: {},
      PhotoUrl: "",
      PhotoUrlDbString: "",
      title: "",
      Cooperate: null,
      isLive: null,
      visible: false,
      CodeDisabled: false,
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      form: this.$form.createForm(this),
      button_loading: false,
      spinning: false,
      tip: null,
      currentId: null,
      userSelect: {},
      visitType: visitType,
      imageUrl: process.env.VUE_APP_API_BASE_URL + "/api/Upload/UploadImg",
      VisitImages: [],
      cancelText: "取消",
      okText: "保存",
      llgxList: [],
      gzxxList: [],
      shjwList: [],
      sxdtList: [],
      stjkList: [],
      bxqkList: [],
      zfrList: [],
      aqfxList: [],
      zfbjList: [],
      isBad: null,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    // getSupervisionObjectList({ index: 1, pageSize: 999, }).then((res) => {
    //   this.supervisionList = res.data.map((el) => {
    //     return { value: el.id, label: el.name };
    //   });
    // });
    getDicDropList({ CategoryId: 2071 }).then((res) => {
      this.llgxList = res.data.map((el) => {
        return { value: el.ID, label: el.Title };
      });
    });
    getDicDropList({ CategoryId: 2072 }).then((res) => {
      this.gzxxList = res.data.map((el) => {
        return { value: el.ID, label: el.Title };
      });
    });
    getDicDropList({ CategoryId: 2073 }).then((res) => {
      this.shjwList = res.data.map((el) => {
        return { value: el.ID, label: el.Title };
      });
    });
    getDicDropList({ CategoryId: 2074 }).then((res) => {
      this.sxdtList = res.data.map((el) => {
        return { value: el.ID, label: el.Title };
      });
    });
    getDicDropList({ CategoryId: 2075 }).then((res) => {
      this.bxqkList = res.data.map((el) => {
        return { value: el.ID, label: el.Title };
      });
    });
    getDicDropList({ CategoryId: 2079 }).then((res) => {
      this.zfrList = res.data.map((el) => {
        return { value: el.ID, label: el.Title };
      });
    });
    getDicDropList({ CategoryId: 2082 }).then((res) => {
      this.stjkList = res.data.map((el) => {
        return { value: el.ID, label: el.Title };
      });
    });
    getDicDropList({ CategoryId: 2083 }).then((res) => {
      this.aqfxList = res.data.map((el) => {
        return { value: el.ID, label: el.Title };
      });
    });
    getDicDropList({ CategoryId: 2084 }).then((res) => {
      this.zfbjList = res.data.map((el) => {
        return { value: el.ID, label: el.Title };
      });
    });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    view(data) {
      if (data) {
        Object.assign(this, {
          spinning: true,
          visible: true,
          CodeDisabled: false,
          currentId: data.id,
        });
        this.initData(data);
      } else {
        this.visible = true;
        this.form.resetFields();
        this.currentId = null;
      }
      switch (this.actionType) {
        case "add":
          this.okText = "保存";
          this.title = "添加走访记录";
          break;
        case "edit":
          this.okText = "保存";
          this.title = "编辑走访记录";
          break;
        case "view":
          this.title = "查看走访记录";
          this.okText = "取消";
          break;
      }
    },

    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },

    initData(data) {
      this.fileList = [];
      data.VisitImages.forEach((item) => {
        const a = {
          uid: String(item.ID),
          name: String(item.OldFileName),
          status: "done",
          url: getImg(`${item.Path}/${item.NewFileName}`),
        };
        this.fileList.push(a);
      });
      setTimeout(() => {
        this.spinning = false;
        this.PhotoUrlDb = data.VisitImages;
        (this.userSelect.id = data.supervisionObjectID),
          (this.userSelect.name = data.SupervisionObjectName),
          this.form.setFieldsValue({
            ...data,
            visitDate: this.$moment(data.visitDate),
            isLiveConsistent: data.isLiveConsistent ? 1 : 0,
            isUnemployed: data.isUnemployed ? 1 : 0,
            isBadHabit: data.isBadHabit ? 1 : 0,
            isDestitute: data.isDestitute ? 1 : 0,
            isDispute: data.isDispute ? 1 : 0,
            isPetition: data.isPetition ? 1 : 0,
          });
      }, 500);
    },
    handleSubmit() {
      let _this = this;
      this.form.validateFields((err, values) => {
        if (!this.userSelect.id) {
          this.$message.error("先选择对象");
          return;
        }
        if (!err) {
          console.log(_this.PhotoUrlDb);
          let Uploads = [];
          this.fileList.map((aa) => {
            if (aa.scan) {
              aa.response && Uploads.push(aa.response);
            }
            if (!aa.url && !aa.scan) {
              aa.response && Uploads.push(aa.response);
            }
            if (aa.url && !aa.scan) {
              Uploads.push(_this.PhotoUrlDb.find((a) => a.ID == aa.uid));
            }
          });
          let params = {
            ...values,
            id: _this.currentId,
            visitDate: _this
              .$moment(values.visitDate)
              .format("YYYY-MM-DD HH:mm"),
            supervisionObjectID: this.userSelect.id,
            SupervisionObjectName: this.userSelect.name,
            VisitImages: Uploads,
          };
          console.log("Received values of form: ", params);
          this.$emit("save", { ...params });
        }
      });
    },

    handleSelectUser() {
      this.$refs.userModal.view();
    },
    handelGetUser(val) {
      console.log(3344444, val);
      this.userSelect = val;
    },
    handleDelUser() {
      this.userSelect = {};
    },
    handleBad(val) {
      this.isBad = val;
    },

    closeModal() {
      this.form.resetFields();
      this.visible = false;
    },

    handleChange({ file, fileList }) {
      this.fileList = fileList;
      if (file.status === "error") {
        this.$message.error(`认证过期:${file.response}`);
      }
      if (file.status === "uploading") {
        this.Photoloading = true;
        return;
      }
      if (file.status === "done") {
        this.PhotoUrlDb = file.response;
        this.PhotoUrl = getImg(
          `${this.PhotoUrlDb.Path}/${this.PhotoUrlDb.NewFileName}`
        );
        this.PhotoUrlDbString = `${this.PhotoUrlDb.Path}/${this.PhotoUrlDb.NewFileName}`;
        this.Photoloading = false;
      }

      // console.log(11122222,fileList)
    },
    handlePreview(file) {
      this.$refs.photomodal.view(file);
    },

    handleCooperate(val) {
      console.log(val);
      this.Cooperate = val;
    },
    handleIsLive(val) {
      this.isLive = val;
    },
    removePhotoUrl() {
      this.PhotoUrl = null;
      this.PhotoUrlDb = null;
      this.PhotoUrlDbString = null;
    },

    beforePhotoUpload(file) {
      const token = Vue.ls.get(ACCESS_TOKEN) && Vue.ls.get(ACCESS_TOKEN).token;
      this.headers = {
        authorization: "Bearer " + token,
      };
      this.a =
        process.env.VUE_APP_API_BASE_URL +
        `/api/Upload/uploadImg?tablename=VisitRecords&signname=VisitImages`;
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("您只能上传JPG或PNG!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("必须小于2MB!");
      }
      return isJpgOrPng && isLt2M;
    },
  },
};
</script>
<style lang="less">
//@import url(); 引入公共css类
.spin-content {
  padding: 20px;
}
.tabs_span {
  display: inline-block;
  padding: 0 5px;
  margin-right: 10px;
  border-radius: 5px;
  border: 1px solid #dddddd;
}

.disable {
  pointer-events: none;
}
</style>
